在學習 webpack 的領域中，有四個核心心法一定要先熟悉，分別是 Entry、Output、Loaders、Plugins，而今天，主要會介紹 Entry 的觀念，及相關用法。

還記得在 <02 - 立竿見影> 使用 webpack 快速模組化，初探 config 這篇文章當中，我們有提到 config檔：webpack.config.js 嗎？

其設定檔的內容如下：

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

以下讓我們來專注 entry 的觀念及用法情境吧，同時也要請大家邊思考囉：

官方對於 Entry 的定義：

webpack creates a graph of all of your application's dependencies. The starting point of this graph is known as an entry point. The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application's entry point as the contextual root or the first file to kick off your app.

如果沒辦法理解原文的定義的話，那我想可以先用這樣的方式去理解：在 entry 所指定到的檔案，都會被打包成一個模組讓你方便使用，而這些模組，都有其各自的相依性。

我想以常用情境的狀況來解釋會比較好一些，所以我做以下使用情境的區分

打造 library 或建立 Single Page 網頁時，使用 Single Entry (Shorthand) Syntax

我們原來的 webpack.config.js，就是 Single Entry (Shorthand) Syntax 喔，也就是：

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

而其實上述是比較簡單的語法，完整的寫法會是：

module.exports = {
  entry: {
    main: './app/index.js',
  },
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

上述兩個寫法產生的結果都會是一樣的。

Single Entry (Shorthand) Syntax 使用情境，比較像是你在開發 library 時或 single page 時，才會比較常用，因為它全部都將檔案打包成一個檔案。

想要將 vendors 統一打包成另一個檔案，使用 Object Syntax

其實這種狀況會比較常用，畢竟通常一個網站，都會引用很多的第三方資源，例如 jQuery、Lodash 等等，而通常我們會想要將這些檔案都打包成一個 vendors.js 檔案，以減少網路 requests 的次數。

所以這時我就會將 webpack.config.js 的 entry 部份做如下的修正：

module.exports = {
  entry: {
    app: './app/index.js',
    vendors: './app/vendors.js'
  },
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

然後在專案資料夾下，會建立 app/vendors.js，以載入第三方的資源，所以 app/vendors.js 的內容如下(假設我目前所引用的第三方資源只有 Lodash)：

import _ from 'lodash';

而原來的 ./app/index.js，開啟後，然後移除上述的 import 即可。

當然，此時若你執行 webpack 指令來 bundle 的話，是會出錯的，我執行的結果如下(Conflict: Multiple assets emit to the same filename 'bundle.js')：

$ webpack
Hash: ce94c79aca44581660de
Version: webpack 2.1.0-beta.27
Time: 420ms
    Asset    Size  Chunks             Chunk Names
bundle.js  543 kB       0  [emitted]  vendors
   [3] ./app/index.js 238 bytes {1} [built]
   [4] ./app/vendors.js 24 bytes {0} [built]
    + 3 hidden modules

ERROR in chunk app [entry]
bundle.js
Conflict: Multiple assets emit to the same filename 'bundle.js'

因為 entry 有指定兩個檔案，而 output 卻只有輸出 1 個，產生了衝突，此問題我會留到明天提到 output 時，再來解決。

多個頁面有各自要載入的 js

其實這跟上述的 Object Syntax 是一樣的，只是觀念稍稍轉變，然後用在不同的情境，一樣只要在 entry 指定多個檔案即可，例如：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
}

有沒有覺得對 entry 有了更多的瞭解呢！其實很容易的，既然有了 entry，相對地就要有 output：輸出檔案，明天，讓我們繼續瞭解下個心法 Output。